<script setup lang="ts">
import { hci } from "@/components/framework/icon";
import SectionCard from "@/components/app/section-card.vue";
import { ref } from "vue";
import FolderPickerInput from "@/components/framework/folder-picker-input.vue";
import EnvVarSetOperation from "@/modules/dev-env/components/env-var-set-operation.vue";
import { hc } from "@/framework/vue/util/render.ts";
import { CopyOutlined, DownloadOutlined, SettingOutlined } from "@ant-design/icons-vue";
import { openSystemPropertiesAdvanced } from "@/util/system-utils.ts";
import { copyText } from "@/util/clipboard.ts";
import { openExternal } from "@/util/shell.ts";

const cangjieHome = ref<string | undefined>(native.process.env.CANGJIE_HOME);
const cangjieHomeCurrent = ref<string | undefined>(native.process.env.CANGJIE_HOME);
const paths = [
  "%CANGJIE_HOME%\\bin",
  "%CANGJIE_HOME%\\tools\\bin",
  "%CANGJIE_HOME%\\tools\\lib",
  "%CANGJIE_HOME%\\runtime\\lib\\windows_x86_64_llvm",
];
const userPaths = ["%USERPROFILE%\\.cjpm\\bin"];
</script>

<template>
  <section-card :icon="hci('icon-cangjie')" title="仓颉环境设置">
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" class="pv-20">
      <a-form-item label="CANGJIE_HOME" help="仓颉SDK根目录">
        <div class="flex aic col-gap-10">
          <folder-picker-input v-model:value="cangjieHome" class="flex-1" />
          <env-var-set-operation name="CANGJIE_HOME" :value="cangjieHome" />
          <a-button :icon="hc(CopyOutlined)" @click="copyText('CANGJIE_HOME')">变量名</a-button>
          <a-button :icon="hc(CopyOutlined)" @click="cangjieHome && copyText(cangjieHome)">变量值</a-button>
        </div>
        <template #extra>
          <span>当前值：{{ cangjieHomeCurrent }}</span>
        </template>
      </a-form-item>

      <a-divider orientation="left">
        <span class="color-text-secondary font-14">系统Path变量</span>
      </a-divider>
      <template v-for="(it, i) in paths" :key="'s' + i">
        <a-form-item :label="`Path${i}`">
          <div class="flex aic col-gap-10">
            <a-input :value="it" readonly />
            <a-button :icon="hc(CopyOutlined)" @click="copyText(it)">变量值</a-button>
          </div>
        </a-form-item>
      </template>

      <a-divider orientation="left">
        <span class="color-text-secondary font-14">用户Path变量</span>
      </a-divider>
      <template v-for="(it, i) in userPaths" :key="'u' + i">
        <a-form-item :label="`Path${i}`">
          <div class="flex aic col-gap-10">
            <a-input :value="it" readonly />
            <a-button :icon="hc(CopyOutlined)" @click="copyText(it)">变量值</a-button>
          </div>
        </a-form-item>
      </template>

      <a-form-item :wrapper-col="{ offset: 5 }">
        <a-space>
          <a-button :icon="hc(DownloadOutlined)" @click="openExternal('https://cangjie-lang.cn/download')">下载仓颉</a-button>
          <a-button @click="openSystemPropertiesAdvanced" :icon="hc(SettingOutlined)">系统属性环境变量</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </section-card>
</template>

<style scoped lang="less"></style>
